<template>
    <div id="main6"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import  { onMounted } from 'vue';

 onMounted(()=>{
    var chartDom = document.getElementById('main6');
var myChart = echarts.init(chartDom);
var option;

   option = {
//   title: {
//     text: "漏斗图",
//     subtext: "纯属虚构",
//   },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}%",
  },
//   toolbox: {
//     feature: {
//       dataView: { readOnly: false },
//       restore: {},
//       saveAsImage: {},
//     },
//   },
  legend: {
    data: ["展现", "点击", "访问", "咨询", ],
  },
  calculable: true,
  series: [
    {
      name: "漏斗图",
      type: "funnel",
      left: "10%",
      top: 60,
      //x2: 80,
      bottom: 60,
      width: "80%",
      // height: {totalHeight} - y - y2,
      min: 0,
      max: 100,
      minSize: "0%",
      maxSize: "100%",
      sort: "descending",
      gap: 2,
      label: {
        normal: {
          show: true,
          position: "inside",
        },
        emphasis: {
          textStyle: {
            fontSize: 20,
          },
        },
      },
      labelLine: {
        normal: {
          length: 10,
          lineStyle: {
            width: 1,
            type: "solid",
          },
        },
      },
      itemStyle: {
        normal: {
          borderColor: "#fff",
          borderWidth: 1,
        },
      },
      data: [
        { value: 60, name: "访问" },
        { value: 40, name: "咨询" },
        { value: 20, name: "订单" },
        { value: 80, name: "点击" },
        { value: 100, name: "展现" },
      ],
    },
  ],
};
option && myChart.setOption(option);
window.addEventListener("resize",function(){
    myChart.resize();
})
 })
</script>

<style scoped>
#main6{
    width: 100%;
    height: 100%;
}
</style>